
@function pxToRem($val) {
    @return $val/100 + rem;
}
/* 呼吸灯 */
.breath_light {
    opacity: 0.1; /* 不透明度 */
    overflow: hidden; /* 溢出隐藏 */
    //background: rgba(0, 0, 0, 0.36); /* 背景色 */
    border-image: linear-gradient(-24deg, #3BFDFF, #279AF2, #41D0EF) 10 10;
    border-radius: 50%;

    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: breath; /* 动画名称 */
    animation-duration: 3s; /* 动画时长3秒 */
    animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite; /* 播放次数：无限 */

    /* Safari and Chrome */
    -webkit-animation-name: breath; /* 动画名称 */
    -webkit-animation-duration: 3s; /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}

@keyframes breath {
    from {
        opacity: 0.1;
    }
    /* 动画开始时的不透明度 */
    50% {
        opacity: 1;
    }
    /* 动画50% 时的不透明度 */
    to {
        opacity: 0.1;
    }
    /* 动画结束时的不透明度 */
}

@-webkit-keyframes breath {
    from {
        opacity: 0.1;
    }
    /* 动画开始时的不透明度 */
    50% {
        opacity: 1;
    }
    /* 动画50% 时的不透明度 */
    to {
        opacity: 0.1;
    }
    /* 动画结束时的不透明度 */
}


/* 水波动效 */
.wave_wrapper {
    margin: 0 auto;
    background-color: transparent;
    transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
    border-radius: 50%;
    span {
        position: absolute;
        width: 50%;
        height: 50%;
        top: 25%;
        left: 25%;
        border: 15px solid  rgba(38, 81, 149, 0.5);
        border-radius: 50%;
        z-index: -1;
        &.wave_scale {
            animation: wave_scale 3s linear infinite;
            -webkit-animation: wave_scale 3s linear infinite;
        }
        &.wave_scale.delay {
            animation: wave_scale 3s linear infinite 0.3s;
            -webkit-animation: wave_scale 3s linear infinite 0.3s;
        }
    }
}

@keyframes wave_scale {
    from {
        transform: translate3d(-41px, -41px, 0px) scale(1, 1);
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
    to {
        transform: translate3d(-41px, -41px, 0px) scale(10, 10);
        -webkit-transform: scale(5, 5);
        opacity: 0;
    }
}

@-webkit-keyframes wave_scale {
    from {
        transform: translate3d(-41px, -41px, 0px) scale(1, 1);
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
    to {
        transform: translate3d(-41px, -41px, 0px) scale(10, 10);
        -webkit-transform: scale(5, 5);
        opacity: 0;
    }
}

//跑马灯
.line-animatedgradient{
    display: none;
    position: absolute;
    bottom: pxToRem(2);
    left: 50%;
    width: 95%;
    height: pxToRem(4);
    transform: translateX(-50%);
    background: linear-gradient(90deg, RGBA(0, 150, 255, 1) 20% , RGBA(92, 236, 255, 1) 60% , rgba(1, 223, 244, 0.2) 20%);
    -webkit-animation: animatedgradient 3s ease alternate infinite;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
    border-radius: 50%;
}
@-webkit-keyframes animatedgradient {
    0% {
        background-position: 0% 20%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
//放大缩小
@-webkit-keyframes scale-animation {
    0% {
        transform :  scale3d(1,1,100) translateY(0px) translateZ(100px);
    }
    50% {
        transform :  scale3d(1.1,1.1,100) translateY(10px) translateZ(400px);
    }
    100% {
        transform :  scale3d(1,1,100) translateY(0px) translateZ(100px);
    }
}

@keyframes scale-animation {
    0% {
        transform :  scale3d(1,1,100) translateY(0px) translateZ(100px);
    }
    50% {
        transform :  scale3d(1.1,1.1,100) translateY(10px) translateZ(400px);
    }
    100% {
        transform :  scale3d(1,1,100) translateY(0px) translateZ(100px);
    }
}

//放大缩小
@-webkit-keyframes map-scale-animation {
    0%{
        transform : scale(1);
    }
    50%{
        transform : scale(1.3);
    }
    100%{
        transform : scale(1);
    }

}

@keyframes map-scale-animation {
    0%{
        transform : scale(1);
    }
    50%{
        transform :  scale(1.3);
    }
    100%{
        transform : scale(1);
    }
}

//页面退出
@-webkit-keyframes page-out-animation {
    0% {
        transform :  translate(0%,0%);
    }
    100% {
        transform : translate(100vw,100vh);
    }
}

@keyframes page-out-animation {
    0% {
        transform :  translate(0%,0%);
    }
    100% {
        transform : translate(100vw,100vh);
    }
}
//页面进入
@-webkit-keyframes page-enter-animation {
    0% {
        transform : translate(-100vw,-100vh);
    }
    100% {
        transform : translate(0%,0%);
    }
}

@keyframes page-enter-animation {
    0% {
        transform :translate(-100vw,-100vh);
    }
    100% {
        transform : translate(0%,0%);
    }
}

//正方形自动旋转
@-webkit-keyframes rotate-animation {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate-animation {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
//裁剪动画
@-webkit-keyframes rect-animation {
    0% {
        clip:rect(0px 1.8rem 1.8rem 1.8rem);
    }
    50% {
        clip:rect(0px 1.8rem 1.8rem 0px);
    }
    100% {
        clip:rect(0px 1.8rem 1.8rem 1.8rem);
    }
}
@keyframes rect-animation {
    0% {
        clip:rect(0px 1.8rem 1.8rem 1.8rem);
    }
    50% {
        clip:rect(0px 1.8rem 1.8rem 0px);
    }
    100% {
        clip:rect(0px 1.8rem 1.8rem 1.8rem);
    }
}

//圆球页面进入
@-webkit-keyframes round-left-animation {
    from {
        left: -100vw;
    }
    to {
        left:pxToRem(70);
    }
}

@keyframes round-left-animation {
    from {
        left: -100vw;
    }
    to {
        left:pxToRem(70);
    }
}
@-webkit-keyframes round-right-animation {
    from {
        right: -100vw;
    }
    to {
        right:pxToRem(70);
    }
}

@keyframes round-right-animation {
    from {
        right: -100vw;
    }
    to {
        right:pxToRem(70);
    }
}
//方块箭头动效
@-webkit-keyframes block-animation{
    to{
        opacity: 0.3;
    }
    from{
        opacity: 1;
    }
}
@-webkit-keyframes block-animation {
    to{
        opacity: 0.3;
    }
    from{
        opacity: 1;
    }
}
